<template>
    <div style="background-color:rgba(0,0,0,0.3);">
        <button type="primary" class="back" @click="clickBackMap" v-if="deepTree.length > 1">返回</button>
        <!-- 左边数据统计 -->
        <section class="mainbox">
            <!-- 中间数据统计 -->
            <div class="item center">
                <!-- 地图展示位置 -->
                <div class="map" style="position: relative">
                    <div class="chart chart_map" id="chart_map"></div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>

    import { getCityJSON, getDistrictsJSON, getProvinceJSON } from '../bigscreen/common/get-json'
    import { cityProvincesMap } from '../bigscreen/common/cityProvincesMap'
    import { mapOption } from '../bigscreen/common/mapOption'

    let timer = null;
    export default {
        data() {
            return {
                chart: null, // 实例化echarts
                provincesMap: cityProvincesMap.provincesMap, // 省拼音，用于查找对应json
                provincesCode: cityProvincesMap.provincesCode, // 市行政区划，用于查找对应json
                areaMap: cityProvincesMap.areaMap, // 省行政区划，用于数据的查找，按行政区划查数据
                areaName: '贵州省', // 当前地名
                areaCode: '520000', // 当前行政区划
                areaLevel: 'province', // 当前级别 province省   市city  区/县district
                deepTree : [],
                mapDataSource : [],

                dataSource: [{
                    name: '贵阳市',
                    code : '520100',
                    lat : [106.61, 26.64],
                    value: 10,
                    level: 3
                }, {
                    name: '六盘水市',
                    code : '520200',
                    lat : [104.84, 26.59],
                    value: 12,
                    level: 2
                }, {
                    name: '遵义市',
                    code : '520300',
                    lat : [106.96, 27.71],
                    value: 11,
                    level: 1
                }, {
                    name: '安顺市',
                    code : '520400',
                    lat : [104.84, 26.59],
                    value: 16,
                    level: 2
                }, {
                    name: '铜仁市',
                    code : '520600',
                    lat : [109.20, 27.71],
                    value: 16,
                    level: 2
                }, {
                    name: '黔西南州',
                    code : '522300',
                    lat : [104.87, 25.10],
                    value: 12,
                    level: 3
                }, {
                    name: '黔东南州',
                    code : '522600',
                    lat : [107.51, 26.19],
                    value: 12,
                    level: 3
                }],
            }
        },
        mounted() {
            this.$nextTick(() => {
                let params = {
                    areaName: this.areaName,
                    areaCode: this.areaCode,
                    areaLevel: this.areaLevel
                }
                this.requestGetProvinceJSON(params)
                this.chart.on('click', this.echartMapClick)

            })
        },
        methods: {
            // 加载省级地图
            requestGetProvinceJSON(params) {
                let res = getProvinceJSON(params.areaCode)
                if (!(res && res.features)) {
                    return
                }
                let state = true
                this.deepTree.forEach((item) => {
                    if (item['params']['areaCode'] == params.areaCode) {
                        state = false
                    }
                })
                if (state) {
                    this.deepTree.push({ mapData: res, params: params })
                }
                this.initEchantsMap(params.areaName, res, res.features)
            },
            // 加载市级地图
            requestGetCityJSON(params) {
                let res = getCityJSON(params.areaCode)
                if (!(res && res.features)) {
                    return
                }
                let state = true
                this.deepTree.forEach((item) => {
                    if (item['params']['areaCode'] == params.areaCode) {
                        state = false
                    }
                })
                if (state) {
                    this.deepTree.push({ mapData: res, params: params })
                }
                this.initEchantsMap(params.areaName, res, res.features)
            },
            // 加载区县级地图
            requestGetDistrictsJSON(params) {
                let res = getDistrictsJSON(params.areaCode)
                if (!(res && res.features)) {
                    return
                }
                let state = true
                this.deepTree.forEach((item) => {
                    if (item['params']['areaCode'] == params.areaCode) {
                        state = false
                    }
                })
                if (state) {
                    this.deepTree.push({ mapData: res, params: params })
                }
                this.initEchantsMap(params.areaName, res, res.features)
            },
            // 地图点击
            echartMapClick(params) {
                console.log('echartMapClick ==> ',params)
                let info = params.data;
                if(info){
                    this.areaName = info.areaName;
                    this.areaLevel = info.areaLevel;
                    this.areaCode = info.areaCode;
                    // if (info.areaName in this.provincesMap) {
                    //     this.areaCode = info.areaCode;
                    //     this.areaLevel = info.areaLevel;
                    //     //如果点击的是34个省、市、自治区，绘制选中地区的二级地图
                    //     this.requestGetProvinceJSON({areaName: info.areaName, areaCode: info.areaCode});
                    // } else
                    // if (info.areaName in this.areaMap) {
                    //     //显示县级地图
                    //     this.requestGetCityJSON(info)
                    // } else {
                    //     this.requestGetDistrictsJSON(info)
                    // }
                }else{
                    let name = params.name;
                    let item = null;
                    this.mapDataSource.forEach((val) => {
                        if(val.name == name){
                            item = val;
                        }
                    });
                    if (item) {
                        let params = {
                            areaName : item.areaName,
                            areaLevel : item.areaLevel,
                            areaCode : item.areaCode,
                        };
                        if(item.areaLevel == "city"){
                            this.requestGetCityJSON(params)
                        }
                        if(item.areaLevel == "district"){
                            this.requestGetDistrictsJSON(params)
                        }
                    }
                }
            },
            // 返回上一级地图页
            clickBackMap() {
                if (this.deepTree.length > 1) {
                    this.deepTree.pop()
                    let info = this.deepTree[this.deepTree.length - 1]
                    let params = info.params
                    this.areaName = params.areaName
                    this.areaLevel = params.areaLevel
                    this.areaCode = params.areaCode

                    let areaName = params.areaName
                    let data = info.mapData
                    let mapData = data.features
                    this.initEchantsMap(areaName, data, mapData)
                }
            },
            initEchantsMap(map, res, data = []) {
                if (this.chart) {
                    this.chart.clear()
                }
                //地图容器
                this.chart = this.$echarts.init(document.getElementById('chart_map'));
                this.$echarts.registerMap(map, res)

                let self = this;
                let option = {
                    geo: {
                        map : map,
                        ...mapOption.geoOption
                    },
                    series: [{
                        ...mapOption.geoSeries,
                        data: self.initSeriesData(data)
                    }]
                }
                this.mapDataSource = self.initSeriesData(data);
                this.chart.setOption(option)
            },

            // 设置 effectscatter
            initSeriesData: function (data) {
                let temp = [];
                let geoMapData = this.dataSource;
                data.forEach((item, index) => {
                    let obj = {}
                    obj['properties'] = item['properties']
                    obj['name'] = item['properties']['name']
                    obj['areaName'] = item['properties']['name']
                    obj['areaCode'] = item['properties']['adcode']
                    obj['areaLevel'] = item['properties']['level']
                    obj['value'] = item['properties']['adcode'];
                    obj['value'] = [1,1];
                    let geoInfo = geoMapData.find((v) => v.code == item['properties']['adcode']);
                    if (geoInfo) {
                        obj['geoInfo'] = geoInfo;
                        obj['level'] = geoInfo['level'];
                        obj['value'] = geoInfo['lat'] || [];
                    }
                    temp.push(obj)
                })
                return temp;
            },
        },
        beforeDestroy() {
            clearInterval(timer)
        }
    }
</script>

<style lang="less" scoped>
    .map {
        position: relative;
        width: 100vw;
        height: 54rem;
        background-size: cover;

        .chart {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5;
            height: 10.125rem;
            width: 100%;
        }
    }
</style>
